<!-- @format -->

<template>
  <section>
    <section class="ling-top-text issued_task_detail_wrap">
      <h2>任务详情</h2>
      <van-tabs
        animated
        :line-width="37"
        color="#7AC5EF"
        title-active-color="#7AC5EF"
        title-inactive-color="#666666"
        v-model="active"
      >
        <van-tab title="任务详情">
          <TaskDetail :jobDetailOrUserTaskDetail="jobDetail" />
          <div v-if="active == 0" class="ling-flexBtn">
            <section
              class="ling-linearButton have_task_detail_btn task_cost_btn"
            >
              <span @click="$router.push(`/costDetail/${jobId}`)"
                >费用详情查看</span
              >
            </section>
            <section class="ling-linearButton have_task_detail_btn">
              <span @click="$router.push('/progressReport')">查看进度汇报</span>
            </section>
          </div>
        </van-tab>
        <van-tab title="接单人">
          <div style="padding-bottom: 120px">
            <div
              class="issued_task_detail_list"
              v-for="item in userList"
              :key="item.userJobId"
            >
              <div class="msg1 ling-flex">
                <div class="ling-flex">
                  <span class="boss_name van-ellipsis result-list-tit">
                    {{ item.userDetailResponse.name }}
                  </span>
                  <time>
                    {{ item.userJobCreateTime | datefmt('YYYY-MM-DD') }}
                  </time>
                </div>
                <span class="status">{{ item.userJobStatusDesc }}</span>
              </div>
              <div class="msg2 ling-flex">
                <div>
                  <span class="boss_tel">
                    <a :href="'tel:' + item.userDetailResponse.mobile">
                      {{ item.userDetailResponse.mobile }}
                    </a>
                    <img width="16" :src="tel" alt="电话" />
                  </span>
                </div>
                <div class="ling-flex">
                  <div
                    class="checkMore"
                    @click="
                      $router.push({
                        path: '/checkPersonal',
                        query: {
                          userDetail: JSON.stringify(item.userDetailResponse),
                        },
                      })
                    "
                  >
                    查看
                  </div>
                  <div
                    class="operation_way ling-linearButton"
                    @click="
                      changePerson(
                        item.userJobId,
                        item.userJobStatus,
                        item.userDetailResponse.name
                      )
                    "
                    v-if="
                      item.userJobStatus == 'WAITING' ||
                      item.userJobStatus == 'SELECTED'
                    "
                  >
                    <span
                      v-if="
                        item.userJobStatus == 'WAITING' ||
                        item.userJobStatus == 'SELECTED'
                      "
                    >
                      {{
                        item.userJobStatus == 'WAITING' ? '选择' : '取消'
                      }}该服务方
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="active == 1" class="ling-flexBtn">
              <section
                class="ling-linearButton have_task_detail_btn"
                v-if="jobDetail.jobStatus != 'FINISHED'"
                @click="handleeditJobStatus"
              >
                <span v-if="jobDetail.jobStatus == 'WAITING'"
                  >人员已齐，暂停招聘</span
                >
                <span v-else-if="jobDetail.jobStatus == 'IN_SERVICE'"
                  >还需要人，继续招聘</span
                >
              </section>

              <span v-if="jobDetail.jobStatus == 'WAITING'">招聘中</span>
              <span v-else-if="jobDetail.jobStatus == 'IN_SERVICE'"
                >停止招聘</span
              >
              <span v-else>任务结束</span>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </section>
  </section>
</template>

<script>
import tel from '@/assets/images/tel.png'
import TaskDetail from '../components/TaskDetail'
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('myData')
export default {
  name: 'Homepage',
  // inject: ['reload'],
  data() {
    return {
      active: 0,
      tel,
      isConfirm: false,
    }
  },
  components: {
    TaskDetail,
  },
  computed: {
    ...mapState(['jobDetail', 'userList']),
    jobId() {
      return this.$route.params.jobId
    },
  },
  created() {
    this.getJobDetail(this.jobId)
    this.getUserList(this.jobId)
  },
  methods: {
    ...mapActions([
      'getJobDetail',
      'getUserList',
      'companyEditUserJobType',
      'editJobStatus',
    ]),
    changePerson(userJobId, userJobStatus, name) {
      if (userJobStatus == 'WAITING') {
        this.$dialog
          .confirm({
            message: `确认该任务选择承揽方为“${name}”吗？`,
          })
          .then(async () => {
            await this.companyEditUserJobType({
              userJobId,
              userJobStatus: 'SELECTED',
            })
            this.getUserList(this.jobId) //刷新页面
          })
      } else {
        this.$dialog
          .confirm({
            message: `确认取消“${name}”为承揽方吗？`,
          })
          .then(async () => {
            await this.companyEditUserJobType({
              userJobId,
              userJobStatus: 'WAITING',
            })
            this.getUserList(this.jobId) //刷新页面
          })
      }
    },
    async handleeditJobStatus() {
      const { jobStatus } = this.jobDetail
      if (jobStatus == 'WAITING') {
        await this.editJobStatus({
          jobId: this.jobId,
          jobStatus: 'IN_SERVICE',
        })
        this.getJobDetail(this.jobId) //刷新页面
      } else {
        await this.editJobStatus({
          jobId: this.jobId,
          jobStatus: 'WAITING',
        })
        this.getJobDetail(this.jobId) //刷新页面
      }
    },
  },
}
</script>

<style lang="less" scoped>
.issued_task_detail_wrap {
  background: #f5f5f5;
  .van-ellipsis {
    font-weight: normal;
  }
  .issued_task_detail_list {
    background: white;
    padding: 10px 20px;
    margin-top: 10px;
    .msg1 {
      font-size: 12px;
      margin-bottom: 11px;
      .boss_name {
        font-size: 14px;
        display: inline-block;
        color: #333;
        width: 80px;
      }
      time {
        color: #999999;
      }
      .status {
        color: #333333;
      }
    }
    .msg2 {
      line-height: 30px;
      .boss_tel {
        a {
          font-size: 12px;
          color: #7ac5ef;
        }
        img {
          margin-left: 6px;
        }
      }
      .checkMore {
        font-size: 14px;
        margin-right: 15px;
        color: #7ac5ef;
      }
      .operation_way {
        width: 100px;
        height: 36px;
        line-height: 36px;
        background: linear-gradient(
          32deg,
          rgba(122, 197, 239, 1) 0%,
          rgba(219, 231, 255, 1) 100%
        );
        box-shadow: 0px 8px 20px rgba(122, 197, 239, 0.2);
        font-size: 12px;
        color: white;
      }
    }
  }
  .btn-box {
    position: fixed;
    bottom: 14px;
    left: 50%;
    margin-left: -77px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .issued_task_detail_btn {
      width: 155px;
      height: 45px;
      line-height: 45px;
      font-size: 14px;
      i {
        font-style: normal;
      }
    }
    span {
      color: #7ac5ef;
      font-size: 14px;
      margin-top: 14px;
    }
  }
}
</style>

<style lang="less">
.issued_task_detail_wrap {
  .van-ellipsis {
    font-weight: normal;
  }
  .van-tab__pane,
  .van-tab__pane-wrapper {
    height: 80vh;
  }
}
</style>
